<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级页</title>
</head>
<script src="./js/jquery-3.7.1.js"></script>
<body>
    <table border="1px" width="100%">
        <thead>
            <tr>
                <td colspan="2" style="text-align:center">
                    <span id="classNameId">班级名</span>
                    <button onclick="">显示或隐藏</button>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="20%">
                    <span class="kclb">
                        课程列表：
                    </span>
                </td>
                <td>
                    <span></span>
                </td>
            </tr>
        </tbody>
    </table>

    <table border="1px" width="100%"><thead>
            <tr>
                <td colspan="9" style="text-align:center">
                    <button>删一行</button>
                    <span>同学列表</span>
                    <button>加一行</button>
                </td>
            </tr>
        </thead><tbody><tr><td><span>同学名1</span></td>
            <td><span>同学名2</span></td>
            <td><span>同学名3</span></td>
            <td><span>同学名4</span></td>
            <td><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></td>
            <td><span>同学名5</span></td>
            <td><span>同学名6</span></td>
            <td><span>同学名7</span></td>
            <td><span>同学名8</span></td>
        </tr>
    </tbody></table>
<script>
    //document.getElementById("classNameId").innerHTML="我要改在班级名Js原生操作方式";
    $("#classNameId").html("我要改在班级名Jquery操作方式");

    //document.getElementsByClassName("kclb")[0].innerHTML="改在课程列表js原生操作";
    $(".kclb").html("改在课程列表Jquery操作");

    $.getJSON("../student.json",function(jsonData){
        console.log(jsonData)
    });
</script>
<style>
    .kclb{
        font-size: 20px;
    }
</style>
</body>
</html>